<template>
  <div class="home">
    <!-- 添加区域 -->
    <el-row type="flex" justify="" class="box">
      <el-col :span="18">
        <el-input
          placeholder="请输入内容"
          :value="$store.state.inputValue"
          clearable
          @input="handleInputValueChange"
        >
        </el-input>
      </el-col>
      <!-- 按钮区域 -->
      <el-col :span="6">
        <el-button
          v-if="inputValue == ''"
          disabled
          type="primary"
          class="add_button"
          @click="$store.commit('addListItem', inputValue)"
          >添加</el-button
        >
        <el-button
          v-else
          type="primary"
          class="add_button"
          @click="$store.commit('addListItem', inputValue)"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <!-- 主体区域 -->
    <el-row type="flex" justify="" class="card_box">
      <el-col :span="18">
        <!-- 卡片区域 -->
        <el-card class="box-card">
          <!-- 事项区域 -->
          <el-row
            type="flex"
            justify=""
            class="toDoItem"
            v-for="item in nowList"
            :key="item.id"
          >
            <!-- 复选框 -->
            <el-col :span="2">
              <el-checkbox
                :checked="item.checked"
                @change="$store.commit('changeListItemChecked', item.id)"
              ></el-checkbox
            ></el-col>
            <!-- 文本 -->
            <el-col :span="18">{{ item.text }}</el-col>
            <!-- 删除按钮 -->
            <el-col :span="5" class="delete_icon">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                plain
                @click="$store.commit('removeListItem', item.id)"
              ></el-button
            ></el-col>
          </el-row>
          <!-- 底部区域 -->
          <el-row type="flex" justify="" class="toDoItem_foot">
            <!-- 剩余条数 -->
            <el-col :span="4" class="rest"> 未完成{{ UndownThings }}条 </el-col>
            <!-- 选项卡 -->
            <el-col :span="14" style="text-align: center">
              <el-radio-group v-model="radio" size="small">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="未完成"></el-radio-button>
                <el-radio-button label="已完成"></el-radio-button>
              </el-radio-group>
            </el-col>
            <!-- 清除已完成 -->
            <el-col :span="6" class="delete_icon">
              <el-link type="primary" @click="kk">清除已完成</el-link>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>



<style lang="less" scoped>
.home {
  width: 40%;
  margin: 90px auto;
}
.add_button {
  margin-left: 10px;
}
.card_box {
  margin-top: 10px;
  .toDoItem {
    line-height: 28px;
    padding: 10px 3px;
    border-bottom: 1px solid rgb(229, 231, 228);
    .delete_icon {
      text-align: end;
    }
  }
  .rest {
    font-size: 14px;
    color: #aaa;
  }
  .toDoItem_foot {
    line-height: 28px;
    padding: 10px 3px;
    // border-bottom: 1px solid rgb(229, 231, 228);
    .delete_icon {
      text-align: end;
    }
  }
}
</style>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";

export default {
  data() {
    return {
      radio: "全部",
    };
  },
  methods: {
    ...mapMutations(["removeListItem"]),
    //搜索框内容改变触发的函数
    handleInputValueChange(e) {
      this.$store.commit("updateInputValue", e);
    },
    kk() {
      this.$store.commit("clearDone");
    },
  },
  created() {
    //发起数据请求
    this.$store.dispatch("getList");
  },
  computed: {
    ...mapState(["inputValue"]),
    ...mapGetters(["UndownThings"]),
    nowList: function () {
      if (this.radio == "全部") {
        return this.$store.state.list;
      } else if (this.radio == "未完成") {
        return this.$store.state.list.filter((item) => {
          return item.checked == false;
        });
      } else {
        return this.$store.state.list.filter((item) => item.checked == true);
      }
    },
  },
};
</script>

